<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{passedData}}</h2>
    <ul id="aa">
      <li v-for="item in operators">{{item}}</li>
    </ul>
    <el-button @click="getData">从后台获取数据</el-button>
    <el-button @click="testLayer">layer 测试</el-button>
    <ul>
      <li v-for="item in results">{{item[0]}}</li>
    </ul>
    
    <ul id="treeDemo" class="ztree"></ul>

    <table id="example" class="table table-striped table-hover table-condensed" cellspacing="0" width="100%">
      <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'operator',
    data() {
      return {
        msg: '这是用户列表页',
        operators: ['Tom', 'Jerry', '张三', '李四'],
        results: [],
        passedData: ''
      }
    },
    created: function() {
      this.passedData = "passed data: " + this.$route.query.msg;
    },
    methods: {
      getData() {
        axios.get("static/arrays.txt").then(response => {
          this.results = response.data.data
        })
      },
      testLayer() {
        console.log('layer 不适合vuejs 框架！')
      },
      jqueryDatatable() {
        $('#aa').css('color', 'orange');
        $('#example').DataTable({
          dom: 'rt<"dataTables_paginate_info"lip>',
          language: {
            url: 'static/datatables-zh_cn.json'
          }
        });
      },
      createTree() {
        var setting = {
          data: {
            simpleData: {
              enable: true
            }
          }
        };
        var zNodes =[
          { id:1, pId:0, name:"父节点1 - 展开", open:true},
          { id:11, pId:1, name:"父节点11 - 折叠"},
          { id:111, pId:11, name:"叶子节点111"},
          { id:112, pId:11, name:"叶子节点112"},
          { id:113, pId:11, name:"叶子节点113"},
          { id:114, pId:11, name:"叶子节点114"},
          { id:12, pId:1, name:"父节点12 - 折叠"},
          { id:121, pId:12, name:"叶子节点121"},
          { id:122, pId:12, name:"叶子节点122"},
          { id:123, pId:12, name:"叶子节点123"},
          { id:124, pId:12, name:"叶子节点124"},
          { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
          { id:2, pId:0, name:"父节点2 - 折叠"},
          { id:21, pId:2, name:"父节点21 - 展开", open:true},
          { id:211, pId:21, name:"叶子节点211"},
          { id:212, pId:21, name:"叶子节点212"},
          { id:213, pId:21, name:"叶子节点213"},
          { id:214, pId:21, name:"叶子节点214"},
          { id:22, pId:2, name:"父节点22 - 折叠"},
          { id:221, pId:22, name:"叶子节点221"},
          { id:222, pId:22, name:"叶子节点222"},
          { id:223, pId:22, name:"叶子节点223"},
          { id:224, pId:22, name:"叶子节点224"},
          { id:23, pId:2, name:"父节点23 - 折叠"},
          { id:231, pId:23, name:"叶子节点231"},
          { id:232, pId:23, name:"叶子节点232"},
          { id:233, pId:23, name:"叶子节点233"},
          { id:234, pId:23, name:"叶子节点234"},
          { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
        ];
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
      }
    },
    mounted: function(){
      this.jqueryDatatable();
      this.createTree();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }
</style>
